<template>
  <div>
    <div class="header">
      <div class="back" @click="$router.go(-1)">
        <img src="@/assets/back.png" alt="" />
      </div>
      <div class="title">
        详情
      </div>
    </div>
    <div class="delterDody">
      <img :src="json.data.bannerImg" alt="" @click="showImg()"/>
      <div v-for="(item, index) in json.data.categoryList" :key="index">
        <div>
          <p>{{ item.title }}</p>
          <div
            class="children"
            v-for="(item1, index1) in item.children"
            :key="index1"
            v-show="item.children"
          >
            <p>{{ item1.title }}</p>
            <div
              class="children"
              v-for="(item2, index2) in item1.children"
              :key="index2"
              v-show="item1.children"
            >
              <p>{{ item2.title }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <showImgVue :imgList="json.data.gallaryImgs" :showFlag="disop" @showTag="disImg"></showImgVue>
  </div>
</template>

<script>
import json from "../../../../static/mock/detail.json";
import showImgVue from "../components/showImg.vue"
export default {
  data() {
    return {
      json,
      disop:false
    };
  },
  methods:{
    showImg(){
      this.disop = true
    },
    disImg(){
      this.disop = false
      console.log(11111);
    }
  },
  created() {
    console.log(this.$route.params);
  },
  components:{
    showImgVue
  }
};
</script>

<style scoped lang="scss">
.header {
  padding: 0 20px;
  height: 44px;
  background: #00bcd4;
  color: #fff;
  display: flex;
  align-items: center;
  .back {
    height: 20px;
    img {
      width: 20px;
      height: 20px;
    }
  }
}
.delterDody {
  img {
    width: 100%;
    height: auto;
  }
}
  .title{
    flex: 1;
    text-align: center;
  }
</style>